<template>
  <ul>
    <li v-for="(item, i) in arr" :key="item" @click="removeItem(i)">{{ item }}</li>
  </ul>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    // !reactive 可以把数据包装成响应式的对象
    const arr = reactive(['a', 'b', 'c'])

    const removeItem = (index) => {
      arr.splice(index, 1)
      // !数据确实删掉了，但是视图没有更新，需要使用 reactive 包裹一下数组
      // console.log(arr)
    }
    return {
      arr,
      removeItem
    }
  }
}
</script>